<template>
  <el-header class="nav-header">
    <div class="left">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" :to="item.path">
          {{ item.meta?.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="right">
      <el-badge :value="noticeStore.unreadCount" :hidden="noticeStore.unreadCount === 0">
        <el-icon size="20" style="cursor: pointer" @click="$router.push('/notice')">
          <Bell />
        </el-icon>
      </el-badge>

      <el-dropdown @command="handleCommand">
        <div class="user-info">
          <el-avatar :src="user.photo" size="small" />
          <span class="name">{{ user.realName }}</span>
          <el-icon><CaretBottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- 个人信息 -->
            <el-dropdown-item v-if="user.userType !== 'admin'">
              <el-button
                  type="text"
                  size="small"
                  style="width: 100%; border: none; text-align: left; height: 32px"
                  @click="goToMyInfo"
              >
                <el-icon size="14" style="margin-right: 6px"><User /></el-icon>
                个人信息
              </el-button>
            </el-dropdown-item>

            <!-- 分割线 -->
            <el-dropdown-item divided>
              <el-button
                  type="text"
                  size="small"
                  style="width: 100%; border: none; text-align: left; height: 32px; color: var(--el-color-danger)"
                  @click="logout"
              >
                <el-icon size="14" style="margin-right: 6px"><SwitchButton /></el-icon>
                退出登录
              </el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { computed } from 'vue'
import { onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { Bell, CaretBottom, User, SwitchButton } from '@element-plus/icons-vue'
import { useNoticeStore } from '@/stores/notice'

const authStore = useAuthStore()
const router = useRouter()
const route = useRoute()

const noticeStore = useNoticeStore()
onMounted(() => noticeStore.getUnreadCount())

const user = authStore.user

const goToMyInfo = () => {
  if (user.userType === 'student') {
    router.push('/dashboard/student/my-info')
  } else if (user.userType === 'coach') {
    router.push('/dashboard/coach/my-info')
  }
}

const logout = async () => {
  try {
    await ElMessageBox.confirm('确定退出登录吗？', '提示', { type: 'warning' })
  } catch {
    return // 用户取消
  }
  authStore.clearAuth()
  window.location.replace('/') // 退出后刷新到登录页
}

const breadcrumbs = computed(() => {
  return route.matched.filter(item => item.meta?.title)
})

const handleCommand = async (cmd) => {
  if (cmd === 'logout') {
    await ElMessageBox.confirm('确定退出登录？', '提示', { type: 'warning' })
    authStore.logout()
  } else if (cmd === 'profile') {
    router.push('/dashboard/profile')
  }
}
</script>

<style scoped lang="scss">
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;

  .left {
    flex: 1;
  }

  .right {
    display: flex;
    align-items: center;
    gap: 20px;

    .message-badge {
      cursor: pointer;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;

      .name {
        font-size: 14px;
        color: #333;
      }
    }
  }
}
</style>